<template>
  <div id="mainContentMessage" class="mainContent">
    <div class="container" v-if="PatientList.length">
      <div class="row">
        <div class="col-sm-4 interval_768" style="padding-left:0;">
          <div class="personalDetails">
            <div class="row">
              <div
                class="clearfix col-sm-8"
                style="display:flex;align-items: center;padding-left:0;"
              >
                <div class="sex pull-left">
                  <img
                    src="../../../../static/images/man.png"
                    alt="男"
                    v-show="PatientInfoDetail.Gender_Text=='男'"
                  />
                  <img
                    src="../../../../static/images/woman.png"
                    alt="女"
                    v-show="PatientInfoDetail.Gender_Text=='女'"
                  />
                </div>
                <div class="userName pull-left">{{PatientInfoDetail.Name}}</div>
                <!-- <div class='userAge pull-right'><span>{{PatientInfoDetail.Age}}</span>岁</div>   -->
                <div class="BedID pull-right">{{PatientInfoDetail.BedName}}</div>
              </div>
            </div>
            <p class="blood-type overstriking">
              年龄:
              <span class="age">{{PatientInfoDetail.Age}}</span>
            </p>
            <p class="blood-type overstriking">
              血型:
              <span>{{PatientInfoDetail.BloodType}}</span>
            </p>
            <p class="allergy overstriking">
              过敏史:
              <span>{{PatientInfoDetail.AllergicHistory}}</span>
            </p>
            <div class="sign-icon">
              <span class="ill-te">{{PatientInfoDetail.NursingLevel_Text | filterString}}</span>
              <span class="ill-shu" v-show="PatientInfoDetail.OperationState >= 1">术</span>
              <span class="ill-fei" v-show="PatientInfoDetail.OperationState < 0">费</span>
            </div>
          </div>
        </div>
        <div class="col-sm-8 interval_768" style="padding-left:0;">
          <div class="hospitalizationInformation">
            <h2>
              <span>住院信息</span>
            </h2>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstriking">
                &nbsp;住&nbsp;院&nbsp;号：
                <span>{{PatientInfoDetail.ID_PAT_IN}}</span>
              </p>
            </div>
            <!-- <div class="col-sm-5" style="padding:0;">
            <p class="overstriking">入院情况：<span></span></p>
            </div>-->
            <div class="col-sm-6" style="padding:0;">
              <p class="overstriking">
                特殊治疗：
                <span>{{PatientInfoDetail.SPECIAL_TREATMENT}}</span>
              </p>
            </div>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstriking">
                住院天数：
                <span>{{PatientInfoDetail.InHospDays}}</span>
              </p>
            </div>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstriking">
                手术天数：
                <span>{{PatientInfoDetail.OperationDays}}</span>
              </p>
            </div>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstriking">
                入院时间：
                <span>{{PatientInfoDetail.Time_InHosp | filterDateT}}</span>
              </p>
            </div>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstriking">
                入科时间：
                <span>{{PatientInfoDetail.Time_DEPT_In | filterDateT}}</span>
              </p>
            </div>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstring">入院诊断：</p>
              <span>{{PatientInfoDetail.InHospital_Diagnose}}</span>
            </div>
            <div class="col-sm-6" style="padding:0;">
              <p class="overstring">最新诊断：</p>
              <span>{{PatientInfoDetail.New_Diagnose}}</span>
            </div>

            <!-- <div class="col-sm-5" style="padding:0;">
            <p class="overstriking">是否隐私：<span>{{PatientInfoDetail.IS_Privacy}}</span></p>
            </div>-->
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 interval_768" style="padding-left:0;">
          <div class="medicalStaff">
            <h2>
              <span>医务人员</span>
            </h2>
            <p class="overstriking">
              主治医生：
              <span>{{PatientInfoDetail.ZZYSText}}</span>
            </p>
            <p class="overstriking">
              主任医师：
              <span>{{PatientInfoDetail.ZRYSText}}</span>
            </p>
            <p class="overstriking">
              住院医生：
              <span>{{PatientInfoDetail.ZYYSText}}</span>
            </p>
            <p class="overstriking">
              主管护士：
              <span>{{PatientInfoDetail.ZGHSText}}</span>
            </p>
          </div>
        </div>
        <div class="col-sm-4 interval_768" style="padding-left:0;">
          <div class="descriptionFees">
            <h2>
              <span>费用说明</span>
            </h2>
            <p class="overstriking">
              费用总额：
              <span>{{PatientInfoDetail.TotalCost}}</span>
            </p>
            <p class="overstriking">
              预交费用：
              <span>{{PatientInfoDetail.PrePayment}}</span>
            </p>
            <p class="overstriking">
              费用类型：
              <span>{{PatientInfoDetail.PayType}}</span>
            </p>
            <p class="overstriking">
              未结费用：
              <span>{{PatientInfoDetail.NoCost}}</span>
            </p>
          </div>
        </div>
        <div class="col-sm-4 interval_768" style="padding-left:0;">
          <div class="rests">
            <h2>
              <span>其他</span>
            </h2>
            <p class="overstriking">
              联系人：
              <span>{{PatientInfoDetail.Contacts}}</span>
            </p>
            <p class="overstriking">
              电话：
              <span>{{PatientInfoDetail.Tel}}</span>
            </p>
            <p class="overstring">地址：</p>
            <span style="line-height:30px;" class="site">{{PatientInfoDetail.ADDRESS}}</span>
          </div>
        </div>
      </div>
      <div class="row" style="margin-right:0;">
        <div class="col-xs-12 currentSigns">
          <div class="col-sm-6" style="min-height:165px;">
            <h2>
              <span>当前体征</span>
            </h2>
            <div id="Signs" class="clearfix">
              <div
                :class="['SignsInfo',{'animal-heat': PatientSignList.Temperature >= 35.4 && PatientSignList.Temperature <= 38.5,'respiratory-rate': PatientSignList.Temperature < 35.4 ,'pulse-rate': PatientSignList.Temperature>38.5 }]"
                @click="routerLink($event)"
                data-name="体温"
                v-if="PatientSignList.Temperature != null"
              >
                <div class="Signs-header">体温</div>
                <div class="Signs-content">
                  <span>{{ PatientSignList.Temperature}}</span>
                  <span v-if=" PatientSignList.Temperature < 35.4">↓</span>
                  <span v-if="PatientSignList.Temperature > 38.5">↑</span>
                </div>
              </div>
              <div
                :class="['SignsInfo',{'animal-heat': PatientSignList.SponRate >= 20 && PatientSignList.SponRate <= 50,'respiratory-rate': PatientSignList.SponRate < 20 ,'pulse-rate': PatientSignList.SponRate >50 }]"
                @click="routerLink($event)"
                data-name="自主呼吸频率"
                v-if="PatientSignList.SponRate != null"
              >
                <div class="Signs-header">自主呼吸频率</div>
                <div class="Signs-content">
                  <span>{{ PatientSignList.SponRate}}</span>
                  <span v-if=" PatientSignList.SponRate < 20">↓</span>
                  <span v-if="PatientSignList.SponRate > 50">↑</span>
                </div>
              </div>
              <div
                :class="['SignsInfo',{'animal-heat': PatientSignList.HeartRate >= 40 && PatientSignList.HeartRate <= 130,'respiratory-rate': PatientSignList.HeartRate < 40 ,'pulse-rate': PatientSignList.HeartRate >130 }]"
                @click="routerLink($event)"
                data-name="心率"
                v-if="PatientSignList.HeartRate != null"
              >
                <div class="Signs-header">心率</div>
                <div class="Signs-content">
                  <span>{{PatientSignList.HeartRate}}</span>
                  <span v-if=" PatientSignList.HeartRate < 40">↓</span>
                  <span v-if="PatientSignList.HeartRate > 130">↑</span>
                </div>
              </div>
              <div
                :class="['SignsInfo',{'animal-heat':PatientSignList.Pulse >= 50 && PatientSignList.Pulse <= 130,'respiratory-rate': PatientSignList.Pulse < 50 ,'pulse-rate': PatientSignList.Pulse >130 }]"
                @click="routerLink($event)"
                data-name="脉搏"
                v-if="PatientSignList.Pulse != null"
              >
                <div class="Signs-header">脉搏</div>
                <div class="Signs-content">
                  <span>{{ PatientSignList.Pulse}}</span>
                  <span v-if=" PatientSignList.Pulse < 50">↓</span>
                  <span v-if="PatientSignList.Pulse > 130">↑</span>
                </div>
              </div>
              <h2
                v-if="PatientSignList.Temperature == null && PatientSignList.SponRate == null && PatientSignList.HeartRate == null && PatientSignList.Pulse == null&& !isSign"
              >当前患者没有体征数据！！</h2>
              <loading v-if="PatientSign.length == 0 && isSign"></loading>
            </div>
          </div>
          <div class="col-sm-6" style="min-height:165px;">
            <h2>
              <span>当前评分</span>
            </h2>
            <div id="score" class="clearfix">
              <div
                class="animal-heat SignsInfo"
                @click="routerLinkScore($event)"
                data-name="压疮"
                v-if="PatientSignList.PressureSore != null"
              >
                <div class="Signs-header">压疮</div>
                <div class="Signs-content">
                  <span>{{ PatientSignList.PressureSore}}</span>
                </div>
              </div>
              <div
                class="animal-heat SignsInfo"
                @click="routerLinkScore($event)"
                data-name="基本生活能力(BADL)"
                v-if="PatientSignList.BasicLivingAbility != null"
              >
                <div class="Signs-header">基本生活能力(BADL)</div>
                <div class="Signs-content">
                  <span>{{ PatientSignList.BasicLivingAbility}}</span>
                </div>
              </div>
              <div
                class="animal-heat SignsInfo"
                @click="routerLinkScore($event)"
                data-name="跌倒"
                v-if="PatientSignList.Fall != null"
              >
                <div class="Signs-header">跌倒</div>
                <div class="Signs-content">
                  <span>{{PatientSignList.Fall}}</span>
                </div>
              </div>
              <div
                class="animal-heat SignsInfo"
                @click="routerLinkScore($event)"
                data-name="Atuar评分"
                v-if="PatientSignList.AtuarScore != null"
              >
                <div class="Signs-header">Atuar评分</div>
                <div class="Signs-content">
                  <span>{{ PatientSignList.AtuarScore}}</span>
                </div>
              </div>
              <h2
                v-if="PatientSignList.PressureSore == null && PatientSignList.BasicLivingAbility == null && PatientSignList.Fall == null && PatientSignList.AtuarScore == null && !isGrade "
              >当前患者没有评分数据</h2>
              <loading v-if="PatientSign.length == 0 && isGrade"></loading>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading v-if="PatientList.length==0 && isShow "></loading>
    <noSearch v-if="PatientList.length==0  && !isShow"></noSearch>
  </div>
</template>
<script>
import loading from "@/components/loading/loading"; //导入loading 组件
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
import { apiPatientInfoDetail, apiPatientSigns, apiLogin } from "@/api/api"; // 导入我们的患者详情api接口
export default {
  data() {
    return {
      PatientInfoDetail: {},
      signData: [],
      PatientList: [],
      isShow: true,
      PatientSign: [],
      PatientSignList: {},
      isGrade: true,
      isSign: true
    };
  },
  created() {
    this.getPatientInfoDetail();
    this.GetPatientSigns();
  },
  methods: {
    //  新增
    // newLogin(){
    //   if(!this.$route.query.flag) return;

    //   apiLogin({
    //     loginName: '林杰',
    //     password: '123'
    //   }).then(res => {
    //     // 获取数据成功后的其他操作
    //      //console.log(res);
    //     if (res.Status == 1) {
    //       // 判断复选框是否被勾选 勾选则调用配置cookie方法
    //       if (this.checked == true) {
    //         // console.log("checked == true");
    //         //传入账号名，密码，
    //         localStorage.setItem("account", JSON.stringify(name));
    //         localStorage.setItem("password", JSON.stringify(pass));
    //       } else {
    //          //清空登陆人信息
    //         localStorage.removeItem("account");
    //         localStorage.removeItem("password");
    //         // console.log("sessionStorage");

    //       }
    //       sessionStorage.setItem("token", true);
    //       // _this.$store.dispatch("login");
    //       let loginUser = new Object();
    //     // console.log(JSON.parse(res.Data)[0].Name);
    //       loginUser.Name= JSON.parse(res.Data)[0].Name;
    //       loginUser.Position= JSON.parse(res.Data)[0].Position;
    //       loginUser.Content = JSON.parse(res.Data)[0].Content;
    //       loginUser.ID = JSON.parse(res.Data)[0].ID;
    //        // alert(JSON.stringify(loginUser))
    //       sessionStorage.setItem('user', JSON.stringify(loginUser));
    //       sessionStorage.setItem('loginType', JSON.parse(res.Data)[0].type);

    //     } else {
    //           this.$toast.center(res.Message);
    //       // alert(response.data.Message);
    //     }
    //     })
    //     .catch(err => {
    //       //this.$toast.center('网络错误，请联系管理员');
    //       this.$toast.center(err);
    //       //console.log(err)
    //     })

    //     this.$store.commit("id", this.$route.query.patientId);
    //     this.$store.commit("slideinfo");
    // },
    //  获取数据
    getPatientInfoDetail() {
      apiPatientInfoDetail({
        patientIdIn: this.$store.getters.ID
      }).then(res => {
        if (res.Status == 1) {
          this.isShow = true;
          this.signData = JSON.parse(res.Data);
          this.PatientList = JSON.parse(res.Data);
          this.PatientInfoDetail = JSON.parse(res.Data)[0];
          this.$store.state.stateData = JSON.parse(res.Data)[0];
          this.$store.commit("patientName", this.PatientInfoDetail.Name);
          this.$store.commit("patientSex", this.PatientInfoDetail.Gender_Text);
          this.$store.commit(
            "patientCondition",
            this.PatientInfoDetail.Sickness_Text
          );
          //console.log(JSON.parse(res.Data))
        } else if (res.Status == -1) {
          this.isShow = false;
        }
      });
    },
    GetPatientSigns() {
      apiPatientSigns({
        patientID: this.$store.getters.ID
      }).then(res => {
        if (res.Status == 1) {
          //判断数据里是否有体征指标数据
          if (
            JSON.parse(res.Data)[0].Temperature == null &&
            JSON.parse(res.Data)[0].SponRate == null &&
            JSON.parse(res.Data)[0].HeartRate == null &&
            JSON.parse(res.Data)[0].Pulse == null
          ) {
            this.isSign = false;
          } else {
            this.isSign = true;
          }
          //判断数据里是否有评分项数据
          if (
            JSON.parse(res.Data)[0].PressureSore == null &&
            JSON.parse(res.Data)[0].BasicLivingAbility == null &&
            JSON.parse(res.Data)[0].Fall == null &&
            JSON.parse(res.Data)[0].AtuarScore == null
          ) {
            this.isGrade = false;
          } else {
            this.isGrade = true;
          }
          //赋值
          this.PatientSignList = JSON.parse(res.Data)[0];
          this.PatientSign = JSON.parse(res.Data);
          this.$store.state.signsData = JSON.parse(res.Data)[0];
        } else {
          this.isSign = false;
          this.isGrade = false;
          this.$store.state.signsData = {};
        }
      });
    },

    routerLink(e) {
      //跳转体征指标详情页
      let sign = e.currentTarget.getAttribute("data-name");
      this.$router.push({
        path: "/physicalSignPage/signsDetails",
        query: { signsIndex: sign, state: 1 }
      });
    },
    routerLinkScore(e) {
      //跳转评分项详情页
      let score = e.currentTarget.getAttribute("data-name");
      this.$router.push({
        path: "/scorePage/scoreDetailsPage",
        query: { scoreName: score, state: 1 }
      });
    }
  },
  filters: {
    filterString: function(str) {
      if (!str) return "";
      return str.substring(0, 1);
    }
  },
  components: {
    loading,
    noSearch
  }
};
</script>
<style scoped>
#mainContentMessage {
  overflow-y: auto;
  padding: 25px 0 25px 0;
}
#mainContentMessage .container {
  width: 100%;
  height: 100%;
  font-size: 16px;
}
.container .row {
  margin-bottom: 15px;
  margin-left: 0;
}
.row .personalDetails,
.row .hospitalizationInformation {
  min-height: 258px;
  box-shadow: 1px -2px 15px #ccc;
  border-radius: 8px;
}
.medicalStaff,
.descriptionFees,
.rests,
.currentSigns {
  min-height: 218px;
  box-shadow: 1px -2px 15px #ccc;
  border-radius: 8px;
}
.currentSigns {
  min-height: 195px;
}
.personalDetails {
  padding: 16px 15px 15px 14px;
}
.userName,
.BedID {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.userName {
  font-size: 16px;
  font-weight: 600;
  left: 80px;
}
.BedID {
  width: 100px;
  left: 150px;
  font-size: 15px;
  color: #000;
}
.BedID {
  font-size: 15px;
  color: #666;
}
.BedID:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 13px;
  background-image: url("../../../../static/images/berth.png");
  margin-right: 5px;
}
.overstriking {
  font-size: 16px;
  margin-top: 18px;
  color: #666;
}
.overstriking .age {
  margin-left: 10px;
}
.overstring {
  display: inline-block;
  font-size: 16px;
  color: #666;
  margin-top: 15px;
  line-height: 25px;
  vertical-align: text-top;
}
.overstring + span {
  display: inline-block;
  width: calc(100% - 95px);
  color: #000;
  margin-top: 15px;
  line-height: 25px;
  vertical-align: text-top;
}
.overstring + span.site {
  width: calc(100% - 55px);
}
.overstriking span {
  margin-left: 2px;
  color: #000;
  vertical-align: text-top;
}
.sign-icon {
  position: absolute;
  bottom: 15px;
}
.sign-icon .ill-te {
  color: #de5f59;
}
.sign-icon .ill-shu {
  color: #11a7f3;
}
.sign-icon .ill-fei {
  color: #f5965d;
}
.sign-icon span {
  margin-left: 6px;
}
.sign-icon span:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 21px;
  background-color: #ccc;
  vertical-align: top;
  margin-left: 10px;
}
.sign-icon span:first-child {
  margin-left: 0;
}
.hospitalizationInformation,
.medicalStaff,
.descriptionFees,
.rests,
.currentSigns {
  padding: 15px;
}
h2 span {
  font-size: 18px;
  color: #11a7f3;
  border-bottom: 1px solid #11a7f3;
}
#Signs,
#score {
  margin-top: 15px;
}

#Signs .SignsInfo,
#score .SignsInfo {
  width: 120px;
  height: 120px;
  background-color: #1bace8;
  color: #fff;
  float: left;
  margin-right: 30px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.Signs-header {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.respiratory-rate .Signs-header {
  height: 40px;
  line-height: 20px;
}

.Signs-content {
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #1293c7;
  border-radius: 0 0 5px 5px;
}

.respiratory-rate .Signs-header {
  padding: 0 10px;
  background-color: #febc05;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.respiratory-rate .Signs-content {
  background-color: #dda000;
  border-radius: 0 0 5px 5px;
}

.heart-rate .Signs-header {
  background-color: #03bc97;
  border-radius: 5px 5px 0 0;
}

.heart-rate .Signs-content {
  background-color: #02a784;
  border-radius: 0 0 5px 5px;
}

.pulse-rate .Signs-header {
  background-color: #e33f3e;
  border-radius: 5px 5px 0 0;
}

.pulse-rate .Signs-content {
  background-color: #d12523;
  border-radius: 0 0 5px 5px;
}
@media (max-width: 768px) {
  .interval_768 {
    margin: 10px 0;
  }
}
@media screen and (max-width: 425px) {
  #Signs .SignsInfo,
  #score .SignsInfo {
    width: 100%;
    margin-right: 0;
  }
}
</style>
